<template>
  <div class="demo-title">shade/demo1</div>
  <div class="sscd-demo-row" @click="through.show()">打开Shade（默认透传）</div>
  <div class="sscd-demo-row" @click="noThrough.show()">打开Shade（不透传）</div>
  <Shade v-model:visible="through.visible">
    <div class="custom-content">
      自定义内容。。<br />
      点击这里遮罩层消失
    </div>
  </Shade>
  <Shade v-model:visible="noThrough.visible">
    <div class="custom-content" @click.stop>
      自定义内容加上"@click.stop"阻止透传<br />
      点击这里遮罩层不消失
    </div>
  </Shade>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Shade from '@sscd-mobile/shade'
  const through = reactive({
    visible: false,
    show: () => through.visible = true
  })
  const noThrough = reactive({
    visible: false,
    show: () => noThrough.visible = true
  })
</script>

<style lang="less" scoped>
  .custom-content {
    width: 260px;
    height: 180px;
    margin: 300px auto 0;
    background: #fff;
  }
</style>
